body{
    font-size: 14px;
    background-color: #fff;
}
.cf:after{
    clear: both;
    content:'.';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.cf{
    *zoom: 1;
}
.f_l{float: left;}
.f_r{float: right;}

/* 画板样式 */
.drawHandleWrap .pen_wrap{
    width: 230px;
    height: 60px;
    border: 1px solid #DCDCDC;
    padding: 5px 34px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.pen_wrap .pen_color_wrap{
    position: absolute;
    top: -460px;
    left: 0;
}
.pen_color_wrap .pen_color_inner{
    width: 648px;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius:4px;
    position: relative;
}
.pen_color_wrap .pen_color_inner::after{
    content:'';
    width: 0;
    height: 0;
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    position: absolute;
    bottom: -20px;
    left: 50%;
    /* margin-lef; */
}
.color_pick_title{
    height: 54px;
    background-color: #F2F2F2;
    line-height: 54px;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
}
.color_pick_body{
    padding: 20px 20px 40px 20px;
}
.color_pick_item p{
    font-size: 20px;
    color: #333;
    line-height: 28px;
}
.color_pick_content{
    padding-top: 16px;
}
.pen_wrap .ivu-slider-wrap{
    top: 7px;
}
.pen_wrap .ivu-slider-wrap,
.pen_wrap .ivu-slider-bar{
    height: 6px;
}
.pen_wrap .ivu-slider-bar{
    background-color: #006dff;
}
.pen_wrap .ivu-input-number-large,
.pen_wrap .ivu-input-number-large .ivu-input-number-input-wrap{
    height: 48px;
}
.pen_wrap .ivu-input-number-large input{
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    text-align: center;
}
.pen_wrap .ivu-slider-button-wrap{
    width: 40px;
    height: 40px;
    top: -17px;
}
.pen_wrap .ivu-slider-button{
    width: 40px;
    height: 40px;
    background-color: #006dff;
    box-shadow: 0 0 10px rgba(0,109,255,.3);
    border: 0;
}
.pen_wrap .ivu-tooltip-rel{
    display: block;
}
.color_pick_content .colorBlock{
    display: block;
    float: left;
    width: 114px;
    height: 54px;
    margin-left: 4px;
    margin-top: 4px;
    z-index: 10;
    position: relative;
    border: 1px solid #c5c5c5;
}
.color_pick_content .colorBlock.active{
    transform: scale(1.07);
    border: 14px solid #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    z-index: 20;
}
.colorBlock.transparent{
    background-image: url(../draw/images/transparent.png);
    box-sizing: 100% 100%;
}
.drawHandleWrap .penColor{
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-left: 32px;
    margin-top: 11px;
    position: relative;
}
.drawHandleWrap .penColor::before{
    content:'';
    width: 1px;
    height: 34px;
    background-color: #D8D8D8;
    position: absolute;
    top: -3px;
    left: -16px;
}
.penColor .colorSelected{
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius:4px;
    vertical-align: middle;
    border: 1px solid #C5C5C5;
}
.penColor .arrow{
    display: inline-block;
    width: 18px;
    height: 10px;
    background-image: url(../draw/images/arrow.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-left: 23px;
}
.drawScreenHandleWrap .draw_handle_btn,
.drawHandleWrap .draw_handle_btn{
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    padding: 5px 0;
}
.drawScreenHandleWrap .draw_handle_btn{
    margin-left: 0;
}
.drawHandleWrap .draw_handle_btn .draw_hander{
    margin: 0 20px;
}
.drawHandleWrap .draw_bg_wrap{
    display: inline-block;
    width: 114px;
    height: 60px;
    border: 1px solid #DCDCDC;
    padding: 15px 18px;
    vertical-align: top;
    position: relative;
}
.draw_bg_wrap .pen_color_wrap{
    position: absolute;
    top: -320px;
    left: -300px;
}
.draw_bg_wrap .colorSelected{
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius:4px;
    vertical-align: middle;
    border: 1px solid #C5C5C5;
}
.draw_bg_wrap .colorSelected.transparent{
    background-image: url(../draw/images/transparent.png)
}
.draw_bg_wrap .arrow{
    display: inline-block;
    width: 18px;
    height: 10px;
    background-image: url(../draw/images/arrow.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-left: 23px;
}

.draw_hander{
    display: inline-block;
    width: 49px;
    height: 49px;
    background-repeat: no-repeat;
    background-position: center center;
}
.draw_hander.pen{
    background-image: url(../draw/images/pen.png);
    background-size: 40px 40px;   
}
.draw_hander.d_eraser{
    background-image: url(../draw/images/eraser.png);
}
.draw_hander.d_back{
    background-image: url(../draw/images/back.png);
}
.draw_hander.d_forword{
    background-image: url(../draw/images/forword.png);
}
.draw_hander.d_canvas{
    background-image: url(../draw/images/canvas.png);
}
.draw_hander.d_clear{
    background-image: url(../draw/images/clear.png);
}
.draw_hander.d_screen{
    background-image: url(../draw/images/screen.png);
}
.draw_hander.d_minwin{
    background-image: url(../draw/images/download.png);
}
.draw_hander.d_closeCanvas{
    background-image: url(../draw/images/close.png);
}
.draw_hander.d_screen:hover{
    background-image: url(../draw/images/screen_active.png);
}
.draw_hander.d_minwin:hover{
    background-image: url(../draw/images/download_active.png);
}
.draw_hander.d_closeCanvas:hover{
    background-image: url(../draw/images/close_active.png);
}
.drawScreenHandleWrap .draw_handle_btn{
    display: flex;
    display: -webkit-flex;
}
.drawScreenHandleWrap .draw_handle_btn .draw_handle_item{
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    font-size: 20px;
    color: #606266;
}
.drawScreenHandleWrap .draw_handle_btn .draw_hander{
    display: block;
    margin: 0 auto;
}


.draw_hander.pen.active,
.draw_hander.pen:hover{
    background-image: url(../draw/images/pen_active.png);
    background-size: 40px 40px;   
}
.draw_hander.d_eraser.active,
.draw_hander.d_eraser:hover{
    background-image: url(../draw/images/eraser_active.png);
}
.draw_hander.d_canvas:hover{
    background-image: url(../draw/images/canvas_active.png);
}

.draw_hander.d_clear:hover{
    background-image: url(../draw/images/clear_active.png);
}
.draw_hander.d_back:hover{
    background-image: url(../draw/images/back_active.png);
}
.draw_hander.d_forword:hover{
    background-image: url(../draw/images/forword_active.png);
}
.grid-box .block-item .closeItem{
    background-image: url(../draw/images/remove.png);
}
.block-item.block-add{
    background-image: url(../draw/images/add.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 73px 73px;
    background-color: #fff;
}